<template>
  <div>
    <div
      :style="{
        padding: '20px 7%',
        margin: '0px auto',
        borderColor: '#ddd',
        borderRadius: '0px',
        background: 'none',
        borderWidth: '0 0 1px',
        width: '100%',
        borderStyle: 'solid',
      }"
      class="breadcrumb-preview"
    >
      <el-breadcrumb
        :separator="'Ξ'"
        :style="{ fontSize: '14px', lineHeight: '1' }"
      >
        <el-breadcrumb-item class="item1" to="/"
          ><a>首页</a></el-breadcrumb-item
        >
        <el-breadcrumb-item
          class="item2"
          v-for="(item, index) in breadcrumbItem"
          :key="index"
          ><a>{{ item.name }}</a></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div
      v-if="centerType"
      :style="{
        padding: '20px 7%',
        margin: '0px auto',
        borderColor: '#ddd',
        borderRadius: '0px',
        background: 'none',
        borderWidth: '0 0 1px',
        width: '100%',
        borderStyle: 'solid',
      }"
    >
      <el-button size="mini" @click="backClick">返回</el-button>
    </div>
    <div class="list-preview">
      <el-form :inline="true" :model="formSearch" class="list-form-pv">
        <el-form-item label="艺品名称：">
          <el-input
            v-model="formSearch.yipinmingcheng"
            placeholder="艺品名称"
            @keydown.enter.native="getList(1, curFenlei)"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="艺品类型：">
          <el-input
            v-model="formSearch.yipinleixing"
            placeholder="艺品类型"
            @keydown.enter.native="getList(1, curFenlei)"
            clearable
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="getList(1, curFenlei)"
          ><i
            :style="{ color: '#fff', margin: '0 10px 0 0', fontSize: '14px' }"
            class="el-icon-search"
          ></i
          >查询</el-button
        >
      </el-form>
      <el-button @click="sortClick('clicknum')" style="margin-bottom: 30px;">
        <span
          :style="{
            fontSize: '14px',
            color: '#333',
          }"
          class="icon iconfont icon-xiaoliang13"
        ></span>
        <span>点击量</span>
      </el-button>
      <el-table :data="dataList" border style="width: 100%" height="500">
        <el-table-column prop="faburiqi" label="艺品图片" width="120" align="center">
          <template slot-scope="scope">
            <el-image
              :src="
                baseUrl +
                  (scope.row.fengmian ? scope.row.fengmian.split(',')[0] : '')
              "
              style="width: 50px;height: 50px;"
              @click="
                imgPreView(
                  baseUrl +
                    (scope.row.fengmian ? scope.row.fengmian.split(',')[0] : '')
                )
              "
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="yipinmingcheng" label="艺品名称" />
        <el-table-column prop="yipinleixing" label="艺品类型" />
        <el-table-column prop="qiyuan" label="起源" />
        <el-table-column prop="faburiqi" label="发布日期" />
		<el-table-column prop="clicknum" label="点击量" />
		<el-table-column prop="thumbsupnum" label="点赞量" />
		<el-table-column prop="crazilynum" label="关注量" />
		<el-table-column label="操作" width="120">
			<template slot-scope="scope">
				<el-button type="text" @click.stop="toDetail(scope.row)">查看详情</el-button>
			</template>
		</el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      id="pagination"
      class="pagination"
      :pager-count="7"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      prev-text="<"
      next-text=">"
      :hide-on-single-page="true"
      :layout="['total', 'prev', 'pager', 'next', 'sizes', 'jumper'].join()"
      :total="total"
      :style="{
        padding: '5px 7%',
        margin: '20px auto',
        color: '#333',
        textAlign: 'center',
        width: '100%',
        clear: 'both',
        lineHeight: '40px',
        fontWeight: '500',
        height: '40px',
        order: '50',
      }"
      @current-change="curChange"
      @size-change="sizeChange"
      @prev-click="prevClick"
      @next-click="nextClick"
    ></el-pagination>
    <el-dialog title="预览图" :visible.sync="previewVisible" width="30%">
      <img :src="previewImg" alt="" style="width: 100%;" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  //数据集合
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      selectIndex2: 0,
      selectOptionsList: [],
      layouts: "",
      swiperIndex: -1,
      baseUrl: "",
      breadcrumbItem: [
        {
          name: "手艺制作",
        },
      ],
      formSearch: {
        yipinmingcheng: "",
        yipinleixing: "",
      },
      fenlei: [],
      feileiColumn: "",
      dataList: [],
      total: 1,
      pageSize: 6,
      pageSizes: [10, 20, 30, 50],
      totalPage: 1,
      curFenlei: "全部",
      isPlain: false,
      indexQueryCondition: "",
      timeRange: [],
      centerType: false,
      previewImg: "",
      previewVisible: false,
      sortType: "id",
      sortOrder: "desc",
    };
  },
  created() {
    if (this.$route.query.centerType) {
      this.centerType = true;
    }
    this.baseUrl = this.$config.baseUrl;
    this.getFenlei();
    this.getList(1, "全部");
  },
  //方法集合
  methods: {
    selectClick2(row, index) {
      row.check = index;
      if (index == -1) {
        this.formSearch[row.tableName] = "";
      } else {
        this.formSearch[row.tableName] = row.list[index];
      }
      this.getList();
    },
    add(path) {
      let query = {};
      if (this.centerType) {
        query.centerType = 1;
      }
      this.$router.push({ path: path, query: query });
    },
    getFenlei() {},
    getList(page, fenlei, ref = "") {
      let params = { page, limit: this.pageSize };
      let searchWhere = {};
      if (this.formSearch.yipinmingcheng != "")
        searchWhere.yipinmingcheng = "%" + this.formSearch.yipinmingcheng + "%";
      if (this.formSearch.yipinleixing != "")
        searchWhere.yipinleixing = "%" + this.formSearch.yipinleixing + "%";
      if (this.sortType) searchWhere.sort = this.sortType;
      if (this.sortOrder) searchWhere.order = this.sortOrder;
      this.$http
        .get(`shouyizhizuo/${this.centerType ? "page" : "list"}`, {
          params: Object.assign(params, searchWhere),
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.dataList = res.data.data.list;
            this.total = Number(res.data.data.total);
            this.pageSize = Number(res.data.data.pageSize);
            this.totalPage = res.data.data.totalPage;

            this.pageSizes = [
              this.pageSize,
              this.pageSize * 2,
              this.pageSize * 3,
              this.pageSize * 5,
            ];
          }
        });
    },
    sortClick(type) {
      if (this.sortType == type) {
        if (this.sortOrder == "desc") {
          this.sortOrder = "asc";
        } else {
          this.sortOrder = "desc";
        }
      } else {
        this.sortType = type;
        this.sortOrder = "desc";
      }
      this.getList(1, "全部");
    },
    curChange(page) {
      this.getList(page);
    },
    prevClick(page) {
      this.getList(page);
    },
    sizeChange(size) {
      this.pageSize = size;
      this.getList(1);
    },
    nextClick(page) {
      this.getList(page);
    },
    imgPreView(url) {
      this.previewImg = url;
      this.previewVisible = true;
    },
    toDetail(item) {
      let params = {
        id: item.id,
      };
      if (this.centerType) {
        params.centerType = 1;
      }
      this.$router.push({ path: "/index/shouyizhizuoDetail", query: params });
    },
    btnAuth(tableName, key) {
      if (this.centerType) {
        return this.isBackAuth(tableName, key);
      } else {
        return this.isAuth(tableName, key);
      }
    },
    backClick() {
      this.$router.push({ path: "/index/center" });
    },
  },
};
</script>
<style scoped lang="scss">
.list-preview {
  padding: 50px;
}
</style>
